<template>
  <div class="topTable">
    <div style="width:100%;display: flex;color: #3de7c9;margin-left: 15px; align-items: center;">累计确诊排行</div>
    <dv-scroll-board :config="config" style="width:93%;height:90%" />
  </div>
</template>

<script>


export default {
  name: "TopTable",
  props: {
    areaTopData:[]
  },
  data() {
    return {
      config:{}
    }
  },
  components: {},
  watch: {
    areaTopData:{
      handler(val) {
        this.drawTable(val)
      },
      deep: true,
      immediate: true, // 初次监听即执行
    }
  },
  mounted() {
  },
  methods: {
    drawTable(data) {
      let resData = []
      for (let info in data) {
        let t = []
        let tData = data[info]
        t[0] = tData.addressName
        t[1] = tData.totalConfirm
        t[2] = tData.totalDead
        t[3] = tData.totalHeal
        resData.push(t)
      }
      let resConf = {
        header: ['地名', '累计确诊', '累计死亡', '累计治愈'],
        data: resData,
        index: true,
        rowNum:15,
        columnWidth: [45,60],
        align: ['left']
      }
      this.config = {...resConf}
    },
  }
}
</script>

<style scoped lang="scss">
.topTable{
  width:100%;
  height:100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
</style>
